<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="icon iconfont icon-jifen"></i> {{iconText}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form ref="form" :model="form" label-width="150px" @submit.native.prevent>
                <el-form-item label="线路标题：" >
                    <el-input v-model="form.title" clearable placeholder="请输入线路标题"></el-input>
                </el-form-item>
                <el-form-item label="上传图片封面图：">
                    <div class="sola-upload clearfix">
                        <div class="sola-left " v-show="uploadImgFlag" v-for="(item, index) in uploadImg"><img :src="item" /></div>
                        <div class="sola-upload-right">
                            <el-upload
                            class="avatar-uploader"
                            :action="action"
                            :show-file-list="false"
                            :http-request="myUpload"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <i class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="原价：">
                    <el-input v-model="form.normalPrice" type="number" placeholder="请输入原价"></el-input>
                </el-form-item>
                <el-form-item label="优惠价格：">
                    <el-input v-model="form.memberPrice" type="number" placeholder="请输入优惠价"></el-input>
                </el-form-item>
                <el-form-item label="详情描述：">
                    <el-input type="textarea" rows="10" v-model="form.detail"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">{{bottomText}}</el-button>
                </el-form-item>
            </el-form>
            
        </div>
        
    </div>
</template>
<script>
export default {
    name:'newsAdd',
    data (){
        return{
            iconText:"新增线路",
            bottomText:'确认发布',
            form:{
                title:'',
                desc:'',
                detail:'',
                memberPrice:'',
                normalPrice:''
            },
            uploadImg:[],
            uploadImgFlag:false,
            action:"http://localhost:8080/api/common/upload/base64",
        }
    },
    created (){
        //判断是编辑状态
        this.getNewsInfo();
    },
    methods:{
        getNewsInfo (){
            //判断是是否有ID传递过来  如果有是编辑状态
            if(this.$route.query.id && this.$route.query.id >0){
                //console.log(this.$route.query.id);
                this.$axios.get('/manage/news/find', {
                    params: {
                    id: this.$route.query.id
                    }
                })
                .then(response=>{
                    //console.log(response);
                    if(response.data.code==200){
                        //获取数据
                        this.form.title = response.data.data.title;
                        this.form.desc = response.data.data.summary;
                        this.form.detail = response.data.data.detail;
                        this.uploadImg = response.data.data.img;
                        this.uploadImgFlag = true;
                        this.bottomText = "确认编辑";
                        this.iconText = "编辑新闻";
                        //console.log(this.data);
                    }else{
                        this.$notify.error({
                            title: '查询失败',
                            duration:2000,
                            message: '失败原因：'+response.data.msg
                        });
                    }
                })
                .catch(function (response) {
                    console.log(response);
                });
            }
        },
        myUpload (content){
            let _this=this;
            if (typeof(FileReader) === 'undefined') {
                this.$notify.error({
                    title: '错误',
                    message: '抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！'
                });
                
            } else {
                let file =content.file;
                //console.log(file);
                let reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function(e) {
                    var base = this.result;
                    //console.log(base);
                    _this.submitElementUpload(base,content);
                }
            }

        },
        //拿到base 图片之后，axios提交图片上传
        submitElementUpload (base,content){
            const querystring = require('querystring');
            const param ={
                base64:base
            }
            this.$axios.post('/api/common/upload/base64',querystring.stringify(param)).then(response=>{
                //console.log(response);
                if(response.data.code==200){
                    this.$message({
                        message: '恭喜你，图片上传成功',
                        type: 'success'
                    });
                    this.uploadImg.push(response.data.data);
                    this.uploadImgFlag = true;
                    content.file = null; //清空对象
                }else{
                    this.$notify.error({
                        title: '上传图片失败',
                        duration:2000,
                        message: '失败原因：'+response.data.msg
                    });
                }
                
            }).catch(error=>{
                console.log(error); 
            });
        },
        //上传失败
        handleAvatarError(res){
            //console.log(res);
        },
        //上传成功
        handleAvatarSuccess(res, file) {
            //console.log("上传成功");
            //this.imageUrl = URL.createObjectURL(file.raw);
        },
        //
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        onSubmit (){
            if(this.form.title==""){
                this.$message.error('请输入标题信息');
                return false;
            }else if(this.uploadImg.length<=0){
                this.$message.error('请先上传封面图');
                return false;
            }
            else if(this.form.normalPrice==""){
                this.$message.error('请输入原价');
                return false;
            }
            else if(this.form.memberPrice==""){
                this.$message.error('请输入优惠价格');
                return false;
            }else if(this.form.detail==""){
                this.$message.error('请输入详情内容');
                return false;
            }else{
                
                    const param ={
                        imgBanner:JSON.stringify(this.uploadImg),
                        title:this.form.title,
                        normalPrice:this.form.normalPrice,
                        memberPrice:this.form.memberPrice,
                        unit:"人",
                        detail:this.form.detail
                    }
                    this.add(param);
            
                
                
            }
        },
        //新增方法
        add (param){
            let _this = this;
            const querystring = require('querystring');
            this.$axios.post('/manage/tour-line/add',querystring.stringify(param)).then(response=>{
                //console.log(response);
                if(response.data.code==200){
                    this.$message({
                        message: '恭喜你，发布成功',
                        type: 'success'
                    });
                    setTimeout(function(){
                        _this.uploadImg=[];
                        _this.form.title = "";
                        _this.form.normalPrice="";
                        _this.form.memberPrice="";
                        _this.form.detail="";
                    },1500);
                    
                }else{
                    this.$notify.error({
                        title: '发布失败',
                        duration:2000,
                        message: '失败原因：'+response.data.msg
                    });
                }
                
            }).catch(error=>{
                console.log(error); 
            });
        },
        //提交编辑
        edit (param){
            const querystring = require('querystring');
            this.$axios.post('/manage/news/update',querystring.stringify(param)).then(response=>{
                //console.log(response);
                if(response.data.code==200){
                    this.$message({
                        message: '恭喜你，新闻编辑成功',
                        type: 'success'
                    });
                    setTimeout(function(){
                        
                    },1500);
                    
                }else{
                    this.$notify.error({
                        title: '新闻编辑失败',
                        duration:2000,
                        message: '失败原因：'+response.data.msg
                    });
                }
                
            }).catch(error=>{
                console.log(error); 
            });
        }
    }
}
</script>
<style lang="stylus" scoped>
    .sola-upload{
        .sola-left{
            float:left 
            width: 360px;
            height: 180px;
            margin-bottom 20px;
            margin-right:15px;
            img {
                width :100%;
                height :100%;
            }
        }
        .sola-upload-right{
            float:left;
            position relative;
            margin-bottom 20px;
        }

    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>


